// 目标1：渲染意见列表
// 1.1 获取数据
// 1.2 渲染数据
 
const creator = 'yeezy'
// 封装-获取并渲染意见列表函数
function getBooksList(){
    //1.1 获取数据
    axios({
        url:'http://hmajax.itheima.net/api/books',
        params:{
            // 外号：获取对应数据
            creator
        }
    }).then(result => {
        console.log(result)
        const bookList = result.data.data
        console.log(bookList)
 
        //1.2 渲染数据
        const htmlStr = bookList.map((item, index)   => {
            return `<tr>
            <td>${ index + 1}</td>
            <td>${ item.bookname }</td>
            <td>${ item.author }</td>
            <td>${ item.publisher }</td>
            <td data-id=${item.id}>
              <span class="del" >删除</span>
              <span class="edit">编辑</span>
            </td>
          </tr>
            `
        }).join('')
       console.log(htmlStr)
       document.querySelector('.list').innerHTML = htmlStr
    })
}
// 网页加载运行，获取并渲染列表一次
getBooksList()/**
* 目标2：新增意见
* 2.1 新增弹框 -> 显示和隐藏
* 2.2 收集表达数据，并提交到服务器保存
* 2.3 刷新意见列表
*/

// 2.1 创建弹框对象
const addModalDom = document.querySelector('.add-modal')
const addModal = new bootstrap.Modal(addModalDom)


// 创建编辑弹框对象
const editmodal = document.querySelector('.edit-modal')
const neweditmodal = new bootstrap.Modal(editmodal)


// 保存按钮 -> 点击 -> 隐藏弹框
document.querySelector('.add-btn').addEventListener('click', () => {
   // 2.2 收集表单数据，并提交到服务器保存
   //  前端向后端提交数据，一定是要以对象的形式提交的
   // 1.引入form-serialize.js
   // 2.使用插件
   const addForm = document.querySelector('.add-form')
   // serialize:函数的构造，serialize(你需要工具整合的表单名字,{hash:true,empty:true})
   const suggestObj = serialize(addForm, { hash: true, empty: true})

   console.log(suggestObj)


   // 现在的阶段是什么？
   // AJAX 就是前后端交互的工具，相当于连接器

   // 提交到服务器
   axios({
       url: 'http://hmajax.itheima.net/api/books',
       //接口地址
       method: 'POST',
       //method 通过post方法传数据
       data: {
           ...suggestObj,
           creator
       }
   }).then(result => {
       console.log(result)
       // 2.3 添加成功后，重新请求并渲染意见列表
       getBooksList()
        addForm.reset()
  
       // 隐藏弹框
       addModal.hide()
   })
})
//    删除元素
//    因为元素是动态变化的，所以需要绑定一个静态的父级，这种方法叫做事件委托
//    调用删除接口
//    刷新意见列表
        document.querySelector('.list').addEventListener('click',mouse=>{
        // 获取到触发事件的目标元素
        if(mouse.target.classList.contains('del')){
            // console.log('点击删除元素');
            const thisId = mouse.target.parentNode.dataset.id
            console.log(thisId);
        axios({
            url:`http://hmajax.itheima.net/api/books/${thisId}`,
            method:'DELETE'
        }).then(result=>{
            getBooksList()
        })
        }
        // const thisId = mouse.target.parentNode.dataset.id
        // console.log(thisId);
})
    document.querySelector('.list').addEventListener('click',mouse=>{
        if(mouse.target.classList.contains('edit')){
        //   获取正在编辑的数据
        const parentId = mouse.target.parentNode.dataset.id
        // 采用路径传参
        axios({
            url:`http://hmajax.itheima.net/api/books/${parentId}`,
            
        }).then(result=>{
            const bookobj = result.data.data
            // 获取表单对象

            // 数据对象的属性和标签的类名一致 可以把数据对象遍历，用属性去获取对应标签

            



            // const keys = Object.keys(bookobj)
            // console.log(keys);
            // keys.forEach(key=> {
            //     // 使用属性获取对应标签
            //     document.querySelector(`.edit-form .${key}`).value = bookobj[key]
            // })
            

            // 使用forin语句和foreach语句都可以实现属性的遍历
            for (const key in bookobj) {

            document.querySelector(`.edit-form .${key}`).value = bookobj[key]
            }
        })
            neweditmodal.show()

   }
})


        // 编辑意见的回显功能 数据回显

    document.querySelector('.edit-btn').addEventListener('click',mouse=>{
        // 在点击修改后，刷新列表，提交保存修改
        // 收集表单中的值，并且形成对象
       const edit= document.querySelector('.edit-form')
       const {id,bookname,author,publisher}= serialize(edit,{hash:true,empty:true})
       axios({
        url:`http://hmajax.itheima.net/api/books/${id}`,
        method:'PUT',
        data:{
            bookname,
            author,
            publisher,
            creator
        }

       }).then(result=>{
           getBooksList()
       })
    // 拿到了用户修改信息
    
    
    //<input type="hidden" class="id" name="id" value="435383">
    // 隐藏表单域
    
    

        neweditmodal.hide()
    
    })

// document.querySelector('.list').addEventListener('click', e => {
//     // 获取触发事件目标元素
//     // console.log(e.target)  
//     // 判断点击的是删除元素
//     if (e.target.classList.contains('del')) {
//       // console.log('点击删除元素')
//       // 获取意见id（自定义属性id）
//       const theId = e.target.parentNode.dataset.id
//       console.log(theId)
//       // 3.2 调用删除接口
//       axios({
//           url: `http://hmajax.itheima.net/api/books/${theId}`,
//           method:'DELETE'
//       }).then(() => {
//           //3.3 刷新意见列表
//           getBooksList()
//       })
//     }
//   })
